<template>
	<view class="box">

		<view class="titlex">
			<view class="tianlunRoad">
				定位城市
			</view>
			<view class="detail">
				<uni-icons class="input-uni-icon" type="location-filled" size="18" color="#999" />
				<text class="span">全国</text>
			</view>
			<view class="tianlunRoad">
				直辖市
			</view>

			<view class="label">
				<view :class=" i == 0 ? 'label_item select' : 'label_item' " v-for="item,i in labels">
					{{item.mergerName}}
				</view>
			</view>
		</view>

		<view class="city">
			<view class="city_item" v-for="item in citysName">
				<view class="title" v-if="item !== 'B' && item !== 'C' ">
					{{item}}
				</view>

				<view class="city_particulars" v-for="city in citysObj.data[item]" v-if="item !== 'B' && item !== 'C' ">
					<uni-collapse v-if="city.name !== '上海市' && city.name !== '天津市' ">
						<uni-collapse-item :title="city.name" :show-animation="true">
							<view class="content">
								<view class="biaoq" v-for="ed in city.children">
									{{ed.name}}
								</view>
							</view>
						</uni-collapse-item>

					</uni-collapse>

				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		getCity,
	} from "../../ajax/ajax.js";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const labels = reactive([]);
	const citys = reactive([]);
	const citysObj = reactive({
		data: {}
	});
	const citysName = reactive([]);

	// .getOwnPropertyNames ()

	onLoad(() => {
		console.log("页面初始化");
		getCity().then(res => {
			console.log(res);
			var gather = {};
			res.data.data.forEach(item => {
				// console.log("item",item);


				// console.log("判断", gather.hasOwnProperty(item.initials));

				if (gather.hasOwnProperty(item.initials)) {
					if(item.name == '上海市' || item.name == '天津市' ) {
						labels.push(item)
					}
					gather[item.initials].push(item)
					
				} else {
					if(item.name == '上海市' || item.name == '天津市' ) {
						labels.push(item)
					}
					if(item.initials == 'B' || item.initials == 'C') {
						labels.push(item)
					}
					gather[item.initials] = [];
					gather[item.initials].push(item)
					
				}
				// console.log("自定义数据", gather);

			})

			citysObj.data = gather;
			citysName.push(...Object.getOwnPropertyNames(gather))
			citys.push(...res.data.data)
			// console.log(citys, citysObj, citysName);
			console.log(labels);
		})
	})
</script>

<style lang="scss">
	.box {
		.titlex {
			position: fixed;
			top: 70rpx;
			left: 0;
			background-color: #fff;
			z-index: 100;

			.tianlunRoad {
				text-align: start;
				margin-top: 5.33333vw;
				margin-left: 4.4vw;
				height: 6vw;
				font-size: 2.26667vw;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #999;
				line-height: 6vw;
			}

			.detail {
				font-weight: 500;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				margin-top: 3.46667vw;
				width: 92vw;
				height: 4.53333vw;
			}

			.label {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 750rpx;
				height: 70rpx;
				font-size: 18rpx;
				margin: 10rpx 0;


				.label_item {
					padding: 14rpx 58rpx;
					background-color: #f5f9fa;
					border-radius: 30rpx;

					// &.select {
					// 	color: #0055ff;
					// }
				}
			}



		}

		.city {
			width: 750rpx;
			// height: 800rpx;
			border: 1px solid;
			margin-top: 320rpx;

			.city_item {
				width: 750rpx;

				.title {
					box-sizing: border-box;
					padding: 0 16px;
					color: #323233;
					font-weight: 500;
					font-size: 14px;
					line-height: 32px;
					background-color: #fafafa;
				}

				.city_particulars {
					.example-body {
						flex-direction: column;
						flex: 1;
						border: 1px solid;
					}

					.content {
						display: flex;
						flex-wrap: wrap;
						padding: 15px;

						.biaoq {
							width: 140rpx;
							text-align: center;
							padding: 12rpx 5rpx;
							margin: 10rpx;
							// border: 1px solid;
							border-radius: 30rpx;
							background-color: rgba(245, 247, 253);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.text {
						font-size: 14px;
						color: #666;
						line-height: 20px;
					}

					.button {
						// margin-top: 10px;
						margin: 10px;
						margin-bottom: 0;
					}


				}

			}








		}
	}
</style>